	<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		
		.masklayout{
			position: fixed;
			top: 0;
			left: 0;
			display: none;
			height: 100vh;
			width: 100vw;
			z-index: 999;
			background-color: #666;
		}
		.imglists{
			display: flex;
			justify-content: space-around;
			margin-top: 50px;
			flex-wrap: wrap;
		}
		.imglists .imglist{
			width: 200px;
			height: 200px;
			margin-bottom: 1rem;
		}
		.imglists .imglist:hover{
			transform: scale(1.1);
		}
		.imgcontainer{
			position: fixed;
			width: 100%;
			height: 100vh;
			top: 0;
			left: 0;
			text-align: center;
			z-index: 1000;
		}
		.maximg{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			width: 100%;
			transition: 1s;

		}
		@media (max-width: 600px){
			.imglists .imglist{
				width: 250px;
				height: 250px;
			}
		}
	</style>

	<!-- ugc / 图片放大预览 start-->
	<div class="masklayout"></div>
	<div class="imglists">
		<img class="imglist" src="http://b-ssl.duitang.com/uploads/blog/201505/18/20150518025109_Lfmcx.jpeg" alt="">
		<img class="imglist" src="http://img3.imgtn.bdimg.com/it/u=2208162519,4010854312&fm=26&gp=0.jpg" alt="">
		<img class="imglist" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2472153115,3034378969&fm=26&gp=0.jpg" alt="">
	</div>

	<script type="text/javascript">
		
		(function(win,doc){
			/************************************************
			*	imglist：img标签的dom对象或者jquery对象		*
			*												*
			*	masklayout：遮罩层的dom对象或者jquery对象		*		
			*												*
			*	rotate:原始图片尺寸的缩放比例，默认为1(可选) 	*
			*											  	*
			*************************************************/
			function ImgUp(imglist,masklayout,rotate=1){
				this.imglist=imglist.fadeIn?imglist:$(imglist);
				this.masklayout=masklayout.fadeIn?masklayout:$(masklayout);
				this.rotate=rotate;		
			}
			ImgUp.prototype.imgclick=function(){
				var that=this;
				that.imglist.click(function(){
					var imgtemp=new Image();
					imgtemp.src=$(this).attr('src');
					//原图片宽高
					var imgwidth=imgtemp.width;
					var imgheight=imgtemp.height;
					//容器可视宽高
					var windowwidth=$(window).width();
					var windowheight=$(window).height();
					
					//原图尺寸按比例缩小或扩大
					var tempwidth=imgwidth*that.rotate;
					var tempheight=imgheight*that.rotate;
					var nowwidth,nowheight;
					//如果原图尺寸比容器中的图片尺寸小或者相等，则直接输出跟容器相同的尺寸。
					if (imgwidth<=$(this).width()||imgheight<=$(this).height()) {
						nowwidth=$(this).width();
						nowheight=$(this).height();
					}else{
						nowwidth=windowwidth<tempwidth?windowwidth:tempwidth;
						nowheight=windowheight<tempheight?windowheight*0.7:tempheight;
					}
					console.log(windowwidth,windowheight,nowwidth,nowheight,imgwidth,imgheight,imgtemp);
					//遮罩层出现
					that.masklayout.fadeIn(1000);
					//获取body元素
					var body=$('body');
					//获取当前点击项，防止闭包而丢失this指向
					var imgindex=$(this);
					//创建img容器
					var imgcontainer=$('<div class="imgcontainer"></div>')
					//将容器添加到body中
					
					//设置定时器与jq动画一致
					setTimeout(function(){
						imgcontainer.html(`<img class="maximg" src=${imgindex.attr("src")} 
							style="width:${nowwidth}px;height:${nowheight}px">`);
						body.append(imgcontainer);
					},1000);
					//点击新增的图片容器触发事件，删除容器以及遮罩层消失。
					imgcontainer.click(function(){
						imgcontainer.remove();
						that.masklayout.fadeOut(500);
					});
				});
			}
			win.ImgUp=ImgUp;

		})(window,document);
		var imgup=new ImgUp($('.imglist'),$('.masklayout'));
		imgup.imgclick();
	</script>
	<!-- ugc / 图片放大预览 end-->
